<template>
  <div id="app">
    <!-- 管理后台页面 -->
    <template v-if="isAdminRoute">
      <!-- 只显示路由视图，不显示任何公共组件 -->
      <router-view />
    </template>
    
    <!-- 普通用户页面 -->
    <template v-else>
      <!-- 全局特效背景层 -->
      <div ref="globalBackground" class="global-background-layer"></div>
      
      <!-- 页面特效背景层 -->
      <div ref="pageBackground" class="page-background-layer"></div>
      
      <!-- 顶部导航栏组件 -->
      <TopNav ref="topNav" />
      
      <!-- 分类导航 -->
      <CategoryNav 
        :active-category="activeCategory" 
        @category-change="handleCategoryChange"
      />
      
      <!-- 主内容区域 -->
      <main class="main-content">
        <router-view />
      </main>
      
      <!-- 返回顶部按钮组件 -->
      <BackToTop 
        :show-button="showBackToTop" 
        @scrolled-to-top="onScrolledToTop"
      />
      
      <!-- 底部导航组件（移动端） -->
      <MobileNav />
      
      <!-- 页脚组件 -->
      <AppFooter />
      

    </template>
  </div>
</template>

<script>
import AppFooter from './components/AppFooter.vue'
import BackToTop from './components/BackToTop.vue'
import CategoryNav from './components/CategoryNav.vue'
import MobileNav from './components/MobileNav.vue'
import TopNav from './components/TopNav.vue'
import BackgroundEffects from './utils/backgroundEffects.js'


export default {
  name: 'App',
  components: {
    TopNav,
    CategoryNav,
    BackToTop,
    MobileNav,
    AppFooter,

  },
  data() {
    return {
      activeCategory: 'all',
      showBackToTop: false,
      globalBackgroundEffect: null,
      backgroundEffects: null,
      currentBgEffect: null,
    }
  },
  computed: {
    // 判断当前是否为管理后台路由
    isAdminRoute() {
      return this.$route.path.startsWith('/admin/')
    },
  },
  watch: {
    // 监听路由变化，当进入或离开管理后台时重新检查
    $route: {
      handler() {
        // 根据当前是否为管理后台路由更新背景效果
        this.updateBackgroundEffect()
        if (!this.$route.path.startsWith('/admin/')) {
          this.handleScroll()
        }
      },
      immediate: true,
    },
  },
  mounted() {
    // 将App实例挂载到window对象，便于其他组件访问
    window.appInstance = this
    // 初始化背景效果实例
    this.backgroundEffects = new BackgroundEffects()
    // 初始化全局背景效果
    this.initGlobalBackground()
    // 绑定滚动事件
    window.addEventListener('scroll', this.handleScroll)
    // 初始检查滚动位置
    this.handleScroll()
  },
  beforeUnmount() {
    // 移除滚动事件监听
    window.removeEventListener('scroll', this.handleScroll)
    // 清理全局背景效果
    if (this.globalBackgroundEffect && this.globalBackgroundEffect.parentNode) {
      this.globalBackgroundEffect.parentNode.removeChild(this.globalBackgroundEffect)
    }
  },
  methods: {
    // 检查登录状态并更新UI
    checkLoginStatus() {
      // 使用ref访问TopNav组件实例（Vue 3推荐方式）
      const topNavComponent = this.$refs.topNav
      if (topNavComponent && typeof topNavComponent.checkLoginStatus === 'function') {
        // 调用TopNav组件的checkLoginStatus方法
        topNavComponent.checkLoginStatus()
      }
    },
    // 显示功能即将上线提示
    showFeatureComingSoon(featureName) {
      // 简单的alert提示，实际项目中可以使用更优雅的模态框或通知组件
      alert(`${featureName} 功能即将上线，敬请期待！`)
    },
    showJoinSection() {
      // 先导航到关于页面，然后滚动到加入我们部分
      this.$router.push('/about').then(() => {
        // 增加更长的超时时间，确保页面完全加载和渲染
        setTimeout(() => {
          const joinSection = document.querySelector('.join-section')
          if (joinSection) {
            console.log('找到加入我们部分，开始滚动')
            joinSection.scrollIntoView({ behavior: 'smooth' })
          } else {
            console.log('未找到加入我们部分')
            // 尝试使用更宽泛的选择器
            const allSections = document.querySelectorAll('section')
            console.log('页面中的section数量:', allSections.length)
          }
        }, 1000) // 增加到1秒，确保组件完全渲染
      })
    },
    showLinksSection() {
      // 先导航到关于页面，然后滚动到友情链接部分
      this.$router.push('/about').then(() => {
        // 增加更长的超时时间，确保页面完全加载和渲染
        setTimeout(() => {
          const linksSection = document.querySelector('.links-section')
          if (linksSection) {
            console.log('找到友情链接部分，开始滚动')
            linksSection.scrollIntoView({ behavior: 'smooth' })
          } else {
            console.log('未找到友情链接部分')
            // 尝试使用更宽泛的选择器
            const allSections = document.querySelectorAll('section')
            console.log('页面中的section数量:', allSections.length)
          }
        }, 1000) // 增加到1秒，确保组件完全渲染
      })
    },
    // 处理滚动事件
    handleScroll() {
      // 当滚动距离超过300px时显示返回顶部按钮
      this.showBackToTop = window.scrollY > 300
    },
    // 滚动到顶部事件处理
    onScrolledToTop() {
      console.log('已滚动到顶部')
    },
    // 更新背景效果
    updateBackgroundEffect() {
      // 确保globalBackgroundEffect已创建
      if (!this.globalBackgroundEffect) return
      
      // 移除当前背景效果
      if (this.currentBgEffect && this.globalBackgroundEffect.contains(this.currentBgEffect)) {
        this.globalBackgroundEffect.removeChild(this.currentBgEffect)
        this.currentBgEffect = null
      }
      
      // 根据是否为管理后台路由选择不同的背景效果
      if (this.$route.path.startsWith('/admin/') && this.backgroundEffects && this.backgroundEffects.effects) {
        // 管理后台使用科技感更强的背景效果
        const effectType = 'grid' // 可以选择: 'neon', 'grid', 'stars'
        if (this.backgroundEffects.effects[effectType] && this.backgroundEffects.effects[effectType].create) {
          this.currentBgEffect = this.backgroundEffects.effects[effectType].create()
          if (this.currentBgEffect) {
            this.globalBackgroundEffect.appendChild(this.currentBgEffect)
          }
        }
        
        // 为管理后台添加更强的科技感样式
        this.globalBackgroundEffect.style.cssText = `
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          pointer-events: none;
          z-index: -1;
        `
      } else {
        // 非管理后台使用默认背景
        this.globalBackgroundEffect.style.cssText = `
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          background-color: rgba(0, 0, 0, 0.02);
          background-image: radial-gradient(circle, rgba(255, 99, 71, 0.05) 1px, transparent 1px);
          background-size: 30px 30px;
          pointer-events: none;
          z-index: -1;
        `
      }
    },
    
    // 初始化全局背景效果
    initGlobalBackground() {
      // 创建全局背景容器
      this.globalBackgroundEffect = document.createElement('div')
      this.globalBackgroundEffect.className = 'global-background-effect'
      document.body.appendChild(this.globalBackgroundEffect)
      
      // 根据当前路由设置初始背景效果
      this.updateBackgroundEffect()
    },
    // 处理分类变化
    handleCategoryChange(category) {
      this.activeCategory = category
      // 根据分类导航到不同页面
      switch (category) {
        case 'all':
          this.$router.push('/')
          break
        case 'anime':
          this.$router.push('/anime')
          break
        case 'game':
          this.$router.push('/game')
          break
        case 'music':
          this.$router.push('/music')
          break
        case 'tech':
          this.$router.push('/tech')
          break
        case 'food':
          this.$router.push('/food')
          break
        case 'life':
          this.$router.push('/life')
          break
        case 'movie':
          this.$router.push('/movie')
          break
        case 'knowledge':
          this.$router.push('/knowledge')
          break
        case 'entertainment':
          this.$router.push('/entertainment')
          break
        case 'sports':
          this.$router.push('/sports')
          break
        case 'car':
          this.$router.push('/car')
          break
        case 'comic':
          this.$router.push('/comic')
          break
        case 'chinese-animation':
          this.$router.push('/chinese-animation')
          break
        case 'virtual-idol':
          this.$router.push('/virtual-idol')
          break
        case 'animal':
          this.$router.push('/animal')
          break
        case 'variety-show':
          this.$router.push('/variety-show')
          break
        case 'vision':
          this.$router.push('/vision')
          break
        case 'tv-show':
          this.$router.push('/tv-show')
          break
        case 'periphery':
          this.$router.push('/periphery')
          break
        case 'discover':
          this.$router.push('/discover')
          break
        default:
          this.$router.push('/')
      }
    },
  },
}
</script>

<style>
/* 全局CSS变量 */
:root {
  --bilibili-pink: #fb7299;
  --bilibili-pink-dark: #e95989;
  --text-primary: #18181b;
  --text-secondary: #a1a1aa;
  --background-primary: #18181b;
  --background-secondary: #27272a;
  --border-light: #3f3f46;
  --border-medium: #52525b;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: #f5f5f5;
  overflow-x: hidden;
}

#app {
  min-height: 100vh;
  position: relative;
}

/* 全局特效背景层 */
.global-background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  opacity: 0.3;
}

.page-background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.6;
}

/* 主内容区域样式 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 200px);
  transition: all 0.3s ease;
}

/* 返回顶部按钮样式 */
.back-to-top {
  position: fixed;
  bottom: 60px;
  right: 5px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bilibili-pink);
  color: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-light);
  z-index: 9999;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: #ff5777;
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.back-to-top:active {
  transform: translateY(0);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .main-content {
    padding: 10px;
  }
  
  .back-to-top {
    bottom: 120px; /* 给底部导航栏留出空间 */
    right: 5px;
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

/* 响应式布局调整 */
@media (max-width: 480px) {
  .main-content {
    padding: 5px;
  }
}
</style>